import { computed } from 'vue'
import store from '@/store'
const state = store.state

export const layoutMode = computed(() => state.app.layout)
export const navTheme = computed(() => state.app.navTheme)
export const primaryColor = computed(() => state.app.primaryColor)
export const currentApp = computed(() => state.app.currentApp)
export const colorWeak = computed(() => state.app.colorWeak)
export const grayMode = computed(() => state.app.grayMode)
export const fixedHeader = computed(() => state.app.fixedHeader)
export const fixSidebar = computed(() => state.app.fixSidebar)
export const contentWidth = computed(() => state.app.contentWidth)
export const autoHideHeader = computed(() => state.app.autoHideHeader)
export const sidebarOpened = computed(() => state.app.sidebar)
export const multiTab = computed(() => state.app.multiTab)
export const device = computed(() => state.app.device)
export const darkMode = computed(() => state.app.darkMode)
export const lockScreen = computed(() => state.app.lockScreen)

export const isTopMenu = () => layoutMode.value === 'topmenu'
export const isSideMenu = () => !isTopMenu()
export const loading = computed(() => state.app.loading)

export const animateDisable = computed(() => state.app.animateDisable)
export const animate = computed(() => state.app.animate)
export const animateDirection = computed(() => state.app.animateDirection)

export const menuChangeFlag = computed(() => state.app.menuChangeFlag)
